<template>
<div class="decotitle-root" :class="{round: type == 'round'}">{{label}}</div>
</template>

<script>
export default {
  name: 'decotitle',
  props: ['label', 'type']
}
</script>

<style scoped lang="stylus">
.decotitle-root
  height 35px
  padding 0 8px
  line-height @height
  font-size 24px
  border-style solid
  border-width 0 34px
  border-image url(img/deco-trig.png) 0 34
  display inline-block
  &.round
    border 0
    padding 0
    &::before
    &::after
      content ''
      display inline-block
      box-sizing border-box
      height 10px
      width 10px
      vertical-align 3px
      border 1px solid #59b3ff
      border-radius 50%
      margin 0 10px 0 0
      box-shadow 0 0 5px 1px #036be1, inset 0 0 5px #036be1
    &::after
      margin 0 0 0 10px

</style>